<template>
  <view>
    <u-navbar :title="item.name" autoBack fixed placeholder></u-navbar>
    <view class="content">
      <view v-if="isExpired">
        <view class="circle">
          <view>签到已结束</view>
        </view>
      </view>
      <view v-else-if="sign">
        <view class="circle normal">
          <view>已签到</view>
        </view>
      </view>
      <view v-else>
        <!-- 普通签到 -->
        <view class="sign" v-if="item.type == '2'">
          <view class="circle_wrap">
            <view class="circle_body">
              <view>剩余</view>
              <view>09:57</view>
            </view>
          </view>
        </view>
        <!-- 验证码签到 -->
        <view v-else-if="item.type == '1'">
          <u-code-input v-model="code" ></u-code-input>
        </view>
        <!-- 拍照签到 -->
        <view class="sign" v-else-if="item.type == '0'" @click="getImg()">
          <view v-if="!src" style="display: flex;align-items: center;justify-content: center;width: 200px;height: 200px;border-radius: 50%;background-color: #f5f5f5;margin: 50px auto 30px;">
            <u-icon name="camera" :size="50" color="#999"></u-icon>
          </view>
          <image
            v-else
            :src="src"
            mode="scaleToFill"
          />
          <view class="tips">拍摄一张可证明到达教室上课照片</view>
          <view class="tips">请确保照片清晰，且能体现出自己座位</view>
        </view>
        <view class="signBtn" @click="goSign()">
          立即签到
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  uploadFile
} from '@/api/file'
import {
  addSignLog,
  isSgned
} from '@/api/subject'
export default {
  data() {
    return {
      title: '签到',
      item: {},
      src: '',
      lng: '',
      lat: '',
      img: '',
      code: '',
      distance: 0,
      sign: false,
      isExpired: false
    }
  },
  computed: {
    ...mapGetters(['id', 'name'])
  },
  mounted() {
    this.getLocation()
  },
  methods: {
    getLocation() {
      if(this.isExpired || this.sign) {
        // return
      }
      uni.getLocation({
        type: 'wgs84',
        isHighAccuracy: true,
        success: ({ longitude, latitude }) => {
          this.lat = latitude
          this.lng = longitude
          uni.request({
            url: 'https://restapi.amap.com/v3/distance?parameters',
            data: {
              key: this.config.gdH5Key,
              origins: this.item.position,
              type: 0,
              destination: `${longitude},${latitude}`
            },
            method: 'GET',
            success: ({ data, statusCode, header }) => {
              if(data.status == 1 && data.info == 'OK') {
                this.distance = data.results[0].distance
              }else {
                this.$toast.show({
                  msg: data.info
                })
              }
            },
            fail: (error) => {
              this.$toast.show({
                msg: '位置转换失败'
              })
            }
          })
        },
        fail: (error) => {
          this.$toast.show({
            msg: '请允许应用获取位置信息'
          })
        }
      })
    },
    getImg() {
      uni.chooseImage({
        sizeType: ['original'],
        sourceType: ['camera', 'album'],
        success: ({ tempFilePaths, tempFiles }) => {
          this.src = tempFilePaths[0]
          const params = {
            file: tempFiles[0],
            uid: this.id,
            type: 'sign'
          }
          uploadFile({data: params}).then(res => {
            this.img = res.data.downUrl
          })
        },
        fail: (error) => {
          if(error.code === 12) {
            this.$toast.show({
              msg: '取消拍照'
            })
          }else if(error.code === 11) {
            this.$toast.show({
              msg: '设备不支持'
            })
          }
        }
      })
    },
    goSign() {
      if(this.item.type == '0' && !this.src) {
        this.$toast.show({
          msg: '请先拍摄照片，再签到'
        })
        return
      }
      if(this.item.type == '1' && !this.code) {
        this.$toast.show({
          msg: '请输入签到验证码'
        })
        return
      }else {
        if(this.code != this.item.code) {
          this.$toast.show({
            msg: '验证码错误'
          })
          return
        }
      }
      const params = {}
      params.uid = this.id
      params.img = this.img
      params.id = this.item.id
      params.position = `${this.lng},${this.lat}`
      params.distance = this.distance
      addSignLog(params).then(res => {
        this.$toast.show({
          msg: res.msg
        })
        if(res.code === 200) {
          setTimeout(() => {
            uni.navigateBack()
          }, 300)
        }
      })
    }
  },
  onLoad(options) {
    this.item = JSON.parse(options.item)
    const endTime = new Date(this.item.end_time).getTime()
    this.isExpired = endTime < new Date().getTime() 
    const params = {
      id: this.item.id,
      uid: this.id
    }
    isSgned(params).then(res => {
      console.log(res);
      if(res.code === 200) {
        this.sign = res.data
      }
    })
  }
}
</script>

<style lang="scss" scoped>
  .content {
    background-color: #ffffff;
  }

  .sign {
    position: relative;

    .circle_wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      margin: 50px auto;
      border: 15px solid #eeeeee;
      background-color: #f5f5f5;
    }

    .circle_body {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 170px;
      height: 170px;
      margin: auto;
      border-radius: 50%;
      background-color: #ffffff;
      font-size: 24px;

      view {
        padding: 10px 0;
      }

      view:first-child {
        font-size: 18px;
      }
    }

    image {
      display: block;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      margin: 50px auto 30px;
      background-color: #f5f5f5;
    }

    .tips {
      padding: 5px 0;
      text-align: center;
    }
  }

  .signBtn {
    width: 60%;
    padding: 10px;
    margin: 50px auto;
    background-color: $primary-theme-color;
    border-radius: 4px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
  }

  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    margin: 100px auto 0;
    box-shadow: 0 0 16px rgba($color: #ce2929, $alpha: .5);
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;

    &.normal {
      box-shadow: 0 0 16px rgba($color: #4088f4, $alpha: .5);
    }
  }
</style>